<template>
    

    <div
    class="bottomMenuMainComponent"
    v-if="item"
    :style="{
      borderColor: item.splitLineColor,
      backgroundColor: item.iconStyle === 1 ? (item.bgColor||'transparent') : '',
    }"
  >

  <!-- <ul class="list">
        <li><i class="el-icon-house"></i><span>首页</span></li>
        <li><i class="el-icon-help"></i><span>分类</span></li>
        <li><i class="el-icon-shopping-cart-full"></i><span>购物车</span><span class="badge">4</span></li>
        <li><i class="el-icon-user"></i><span>我的</span></li>
    </ul> -->


    <ul v-if="item.iconStyle === 0" class="iconMenu">
      <li
        v-for="iconItem in item.iconContent"
        :key="iconItem.id"
        :style="{
          width: parseInt(100 / item.iconContent.length) + '%',
          flexDirection: item.iconPosition,
          backgroundColor: iconItem.active
            ? (item.activeMenuBgColor||'transparent')
            : (item.menuBgColor||'transparent'),
        }"
      >
        <i
          :class="iconItem.icon"
          :style="{
            fontSize: item.iconPosition == 'row' ? '16px' : '20px',
            color: iconItem.active ? (item.activeIconColor||'transparent') : (item.iconColor||'transparent'),
            marginRight: item.iconPosition == 'row' ? '5px' : '0px',
          }"
        ></i>
        <span
          :style="{
            color: iconItem.active ? (item.activeTitleColor||'transparent') : (item.titleColor||'transparent'),
          }"
          >{{ iconItem.name }}</span
        >
        <span
          class="badge"
          v-if="iconItem.badge && item.badgeDisplay"
          :style="{
            backgroundColor: item.badgeBgColor||'transparent',
            marginLeft: item.iconPosition == 'row' ? '24px' : '8px',
          }"
          >4</span
        >
      </li>
    </ul>
    <ul v-if="item.iconStyle === 1" class="imgMenu">
      <li
        v-for="imgItem in item.imgContent"
        :key="imgItem.id"
        :style="{
          width: parseInt(100 / item.imgContent.length) + '%',
        }"
      >
        <img
          :src="imgItem.activeImg || menu_img_active"
          alt=""
          v-if="imgItem.active"
        />
        <img :src="imgItem.img || menu_img" alt="" v-else />
        <span
          class="badge"
          v-if="imgItem.badge && item.badgeDisplay"
          :style="{ backgroundColor: item.badgeBgColor||'transparent' }"
          >4</span
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    name: "footComponent",
    data() {
        return {
            item: null,
        };
    },
    props: ["bottomButtonData"],
    components: {},
    created() {},
    mounted() {
        this.$nextTick(()=>{ 
            if(this.bottomButtonData) {
                this.item = JSON.parse(this.bottomButtonData).main;
            }
        })
    },
    methods: {},
    computed: {},
    watch: {},
};
</script>

<style scoped lang="scss">
.bottomMenuMainComponent {
  width: 100%;
  height: 50px;
  border-top: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  .iconMenu {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    li {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        display: flex;cursor: pointer;
      }
      span {
        font-size: 12px;cursor: pointer;
      }
    }
  }
  .imgMenu {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    li {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: 100%;
        display: block;cursor: pointer;
        max-width: 100%;
      }
    }
  }
  .iconMenu,
  .imgMenu {
    li {
      position: relative;
      .badge {
        position: absolute;
        top: 5px;
        left: 50%;
        display: inline-block;
        height: 14px;
        line-height: 14px;
        max-width: 37px;
        min-width: 14px;
        padding: 0 2px;
        font-size: 8px;
        border-radius: 10px;
        text-align: center;
        margin-left: 8px;
        color: #fff;
      }
    }
  }
}
/*
.list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        i {
            font-size: 16px;
            margin-bottom: 2px;
        }
        span {
            font-size: 12px;
            color: #666;
        }
        .el-icon-shopping-cart-full,
        .el-icon-user {
            font-size: 18px;
        }
        .badge {
            position: absolute;
            top: -2px;
            left: 25px;
            background-color: red;
            color: #fff;
            font-size: 12px;
            border-radius: 100%;
            width: 14px;
            height: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}*/
</style>
